<template>
  <basic-layout
    title="通讯录"
    :show-add="true"
  >
    <van-search
      v-model="searchText"
      placeholder="搜索"
      shape="round"
      class="custom-search"
    />

    <van-index-bar
      :sticky-offset-top="searchHeight"
      :index-list="indexList"
      :highlight-color="primaryColor"
    >
      <div class="special-entries">
        <van-cell
          v-for="(item, index) in specialEntries"
          :key="index"
          :title="item.title"
          class="special-cell hover-effect"
        >
          <template #icon>
            <div class="special-icon" :style="{ backgroundColor: item.color }">
              <van-icon :name="item.icon" color="#fff" size="20" />
            </div>
          </template>
        </van-cell>
      </div>

      <template v-for="group in contactGroups" :key="group.index">
        <van-index-anchor :index="group.index" />
        <van-cell
          v-for="item in group.items"
          :key="item.id"
          class="contact-item hover-effect"
        >
          <template #icon>
            <van-image
              round
              fit="cover"
              width="40"
              height="40"
              :src="item.avatar"
            />
          </template>
          <template #title>
            <span class="contact-name">{{ item.name }}</span>
          </template>
        </van-cell>
      </template>
    </van-index-bar>
  </basic-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import BasicLayout from '@/components/layout/BasicLayout.vue'

const searchText = ref('')
const searchHeight = 54
const primaryColor = '#07c160'

const indexList = [
  '★',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
]

const specialEntries = [
  { title: '新的朋友', icon: 'friends-o', color: '#1989fa' },
  { title: '群聊', icon: 'wechat', color: '#07c160' },
  { title: '标签', icon: 'tag-o', color: '#ff976a' },
  { title: '公众号', icon: 'service-o', color: '#ee0a24' },
]

const contactGroups = ref([
  {
    index: '★',
    items: [
      {
        id: 'new-friends',
        name: '新的朋友',
        avatar: 'https://picsum.photos/seed/new-friends/100',
      },
      {
        id: 'group-chats',
        name: '群聊',
        avatar: 'https://picsum.photos/seed/group-chats/100',
      },
      {
        id: 'tags',
        name: '标签',
        avatar: 'https://picsum.photos/seed/tags/100',
      },
      {
        id: 'official',
        name: '公众号',
        avatar: 'https://picsum.photos/seed/official/100',
      },
    ],
  },
  {
    index: 'A',
    items: [
      {
        id: 'a1',
        name: 'Alice',
        avatar: 'https://picsum.photos/seed/alice/100',
      },
      {
        id: 'a2',
        name: 'Alex',
        avatar: 'https://picsum.photos/seed/alex/100',
      },
    ],
  },
  // 可以继续添加更多分组...
])
</script>

<style lang="less" scoped>
@import '@/styles/common.less';

.custom-search {
  padding: 8px 16px;
  background-color: @bg-color;
}

.special-entries {
  margin-bottom: 8px;

  .special-cell {
    .special-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
  }
}

.contact-item {
  padding: 8px 16px;

  :deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .van-image {
    margin-right: 12px;
  }

  .contact-name {
    font-size: 16px;
    color: #323233;
  }

  &.hover-effect {
    &:active {
      background-color: #f2f3f5;
    }
  }
}

:deep(.van-index-anchor) {
  background: #f7f8fa;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

:deep(.van-index-bar__sidebar) {
  right: 0;
  padding-right: 4px;
  font-size: 12px;
}
</style>
